﻿@page "/TimePicker/Forms-Validation"

@using Syncfusion.Blazor.Calendars;
@using Syncfusion.Blazor.Buttons;
@using System.ComponentModel.DataAnnotations;

@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample is used to validate form using the Data Annotation. Type the time in the input element or choose time from the timepicker popup. If the input value is a valid time value, then the given input will be ready to submit. Otherwise, an error message will be shown until you enter or choose the valid time.</p>
</SampleDescription>
<ActionDescription>
    <p>The form enables the validation with data annotation attributes by clicking on the submit externally. All rules are validated by the DataAnnotationsValidator.</p>
    <p>The above time field is configured with the following rules.</p>
    <table style='width:100%'>
        <tr>
            <th>Field</th>
            <th>Rule</th>
        </tr>
        <tr>
            <td>Required</td>
            <td>The field must have a valid time value.</td>
        </tr>
        <tr>
            <td>Range</td>
            <td>The field must have a time value within the given range. The time should be between 9 AM and 6 PM.</td>
        </tr>
    </table>
</ActionDescription>

<div class="control-section">
    <div class="timepicker-section">
        <div id="wrapper" class="timepicker-control">
            <div class="tabs-wrap">
                <div class="wrap">
                    @if (string.IsNullOrEmpty(Message))
                    {
                        <EditForm Model="@annotation" OnValidSubmit="@OnValidSubmit" OnInvalidSubmit="@OnInvalidSubmit">
                            <DataAnnotationsValidator />
                            <div class="form-group">
                                <SfTimePicker id='TimePick' Placeholder="Select a Start Time" TValue="DateTime?" @bind-Value="@annotation.Time"></SfTimePicker>
                                <ValidationMessage For="@(() => annotation.Time)" />
                            </div>
                            <div class="sfButton">
                                <SfButton type="submit" IsPrimary="true">Submit</SfButton>
                            </div>
                        </EditForm>
                    }
                    else
                    {
                        <div class="alert alert-success">
                            @Message
                        </div>
                    }
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    #wrapper {
        max-width: 300px;
        margin: 0px auto;
        padding-top: 20px;
    }

    .tabs-wrap {
        padding: 0 0px 10px;
    }

    .e-bigger .control-section {
        margin-top: 60px;
    }

    .sfButton {
        padding-top: 10px;
        display: flex;
        justify-content: center;
    }

    .validation-message {
        color: red;
        padding-top: 5px;
    }
</style>

@code {
    private string Message = string.Empty;
    async void OnValidSubmit()
    {
        Message = "Form Submitted Successfully!";
        await Task.Delay(2000);
        Message = string.Empty;
        annotation.Time = null;
        StateHasChanged();
    }
    private void OnInvalidSubmit()
    {
        Message = string.Empty;
    }
    private Annotation annotation = new Annotation();
    public class Annotation
    {
        [Required(ErrorMessage = "The Time field is required.")]
        [Range(typeof(DateTime), "09:00:00", "18:00:00", ParseLimitsInInvariantCulture = true, ErrorMessage = "The time should be between 9 AM and 6 PM.")]
        public DateTime? Time { get; set; } = null;
    }
}